<template>
  <div class="ruleAttr">
    <Collapse v-model="G_selectIdx">
      <Panel name="base">
        <span class="fountColor">基础信息</span>
        <div slot="content" class="ruleAttrPanel">
          <Form
            :model="G_formItem"
            :label-width="60"
            label-colon
            :disabled="G_baseDisabled"
            class="form"
          >
            <Row>
              <FormItem label="id" class="formItem formItemWidth">
                <Input v-model="G_formItem.id" disabled placeholder="无内容" />
              </FormItem>
              <FormItem label="编号" class="formItem formItemWidth">
                <Input
                  v-model="G_formItem.rule_number"
                  :disabled="G_readonly"
                  @on-change="onChange($event, 'number')"
                  placeholder="无内容"
                />
              </FormItem>
              <FormItem label="名 称" class="formItem formItemWidth">
                <Input
                  v-model="G_formItem.f_name"
                  :disabled="G_readonly"
                  @on-change="onChange($event, 'name')"
                  placeholder="无内容"
                />
              </FormItem>
              <FormItem label="版 本" class="formItem formItemWidth">
                <Input
                  v-model="G_formItem.version"
                  :disabled="G_readonly"
                  @on-change="onChange($event, 'version')"
                  placeholder="无内容"
                />
              </FormItem>
              <FormItem label="触发" class="formItem formItemWidth">
                <Select
                  style="color:#000"
                  v-model="G_formItem.f_trigger"
                  :disabled="G_readonly"
                  @on-change="onChange($event, 'trigger')"
                  placeholder="无内容"
                >
                  <Option
                    v-for="item in G_selectList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </FormItem>
            </Row>
            <FormItem label="说 明" class="formItem">
              <Input
                v-model="G_formItem.f_comment"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="无内容"
                :disabled="G_readonly"
                @on-change="onChange($event, 'explain')"
              />
            </FormItem>
          </Form>
        </div>
      </Panel>
      <Panel name="in">
        <span class="fountColor ">
          输入参数
          <!-- <Button
            :disabled="!G_allowNewArg"
            @click="handleNewRow(row, index)"
            icon="md-add"
          /> -->
        </span>
        <p slot="content" class="ruleAttrPanel">
          <o-simple-table
            :allowEdit="G_argAllowEdit"
            :disabled="G_readonly"
            :data="G_inData"
            :columns="G_inColumns"
            :compBoxInfo="GT_compBoxInfo"
            @onSaveRow="onSaveRow($event, 'inArg')"
          />
        </p>
      </Panel>
      <Panel name="out">
        <span class="fountColor">输出参数</span>
        <p slot="content" class="ruleAttrPanel">
          <o-simple-table
            :allowEdit="G_argAllowEdit"
            :disabled="G_readonly"
            :data="G_outData"
            :columns="G_outColumns"
            :compBoxInfo="GT_compBoxInfo"
            @onSaveRow="onSaveRow($event, 'outArg')"
          />
        </p>
      </Panel>
    </Collapse>
  </div>
</template>

<script lang="ts">
import {
  T_srv,
  Tsrv,
  ts,
  ifs,
  I_ruleEditor,
  I_ruleArg,
  inClumns,
  outClumns,
  ruleToolbarListIn,
  ruleToolbarListOut,
  I_ruleAttrData,
  I_baseInfo,
  vue
} from './config';

@T_srv.comp({ components: {} })
export default class nodeArrt extends vue {
  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ts.T_compBox;

  private G_compID: string;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private G_inColumns: any = {};

  private G_inData: Array<any> = [];

  private G_outColumns: any = {};

  private G_outData: Array<any> = [];

  private G_selectIdx: Array<string> = ['base', 'in', 'out'];

  private G_ruleInList: Array<object> = ruleToolbarListIn;

  private G_ruleOutList: Array<object> = ruleToolbarListOut;

  private G_formItem: I_baseInfo = {
    id: '',
    // 规则库编号
    rule_number: ``,
    f_name: ``,
    version: ``,
    f_comment: ``,
    f_trigger: ``
  };

  private G_baseDisabled: boolean = false;

  private G_readonly = true;

  private G_argAllowEdit = true;

  private G_allowNewArg = true;

  private G_selectList: Array<object> = [
    { value: 'api', label: 'API调用' },
    { value: 'event', label: '事件调用' },
    { value: 'task', label: '任务调用' }
  ];

  created() {
    this.G_inColumns = inClumns;
    this.G_outColumns = outClumns;

    this.G_compID = Tsrv.utils.getGUID();
    // 如果外部有传入组件信息
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    this.GT_compBox.addCompMergeName(this.G_compID, `ruleAttr`, this);
  }

  destroyed() {
    Tsrv.compBox.removeCompMergeName(this.G_compID, 'ruleAttr');
  }

  setFormItem(d: I_baseInfo) {
    this.G_formItem = d;
  }

  onChange(P_e?, P_s?: string) {
    const L_editor: I_ruleEditor = this.GT_compBox.getCompMergeName(
      this.G_compID,
      `ruleEditor`
    ).G_editor;
    L_editor.ruleAttr.baseInfo = this.G_formItem;
  }

  // // 设置id 新增保存后设定行ID 打开数据时设置行ID
  // setRuleID(P_id: string) {
  //   this.G_formItem.ruleID = P_id;
  // }

  /**
   * @Author: wiz
   * @param {*} data
   * @param {*} rowID
   * @return {*}
   * @description: 供外部调用初始化数据
   */
  setData(data: I_ruleAttrData) {
    const L_editor: I_ruleEditor = this.GT_compBox.getCompMergeName(
      this.G_compID,
      `ruleEditor`
    ).G_editor;
    this.G_formItem = data.baseInfo;
    L_editor.ruleAttr.baseInfo = this.G_formItem; // 同步baseInfo到editor
    this.G_inData = data.inArg;
    // 输入参数
    L_editor.ruleAttr.inArg = this.G_inData;
    this.G_outData = data.outArg;
    // 输出参数
    L_editor.ruleAttr.outArg = this.G_outData;
    // 行id G_formItem.ruleID
    // L_editor.ruleAttr.baseInfo.ruleID = rowID;
  }

  ruleInBtnClick(item, e) {}

  ruleOutBtnClick(item, e) {}
  /**
   * @Author: wiz
   * @param {*} data
   * @param {*} P_s
   * @return {*}
   * @description: 保存数据
   */

  onSaveRow(e, P_s) {
    if (e.data.length === 0) {
      return;
    }
    const L_editor: I_ruleEditor = this.GT_compBox.getCompMergeName(
      this.G_compID,
      `ruleEditor`
    ).G_editor;
    // let L_arg: I_ruleArg[] = [];
    // e.data.forEach(item => {
    //   L_arg.push({ name: item.name, dataType: item.dataType });
    // });
    if (P_s === `inArg`) {
      L_editor.ruleAttr.inArg = e.data;
      this.G_inData[e.index] = e.row;
    } else if (P_s === `outArg`) {
      L_editor.ruleAttr.outArg = e.data;
      this.G_outData[e.index] = e.row;
    } else {
      throw new Error(`Arg err`);
    }
  }
}
</script>
<style scoped lang="scss">
.ruleAttr {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.ruleAttrPanel {
  border-top: 1px solid #a1a1b3;
  border-bottom: 1px solid #a1a1b3;
}
.formItem {
  margin-bottom: 6px;
}
.formItemWidth {
  width: 33%;
}
.form {
  padding-top: 6px;
}
.fountColor {
  color: var(--default-hover-font-color);
}
</style>
